<template>
  <div class="newsC">
    <div class="newsC_title">
      <span>操作说明</span></div>
    <span class="newsC_desTitle">{{ str }}</span>
<!--    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center">-->
<!--      <span class="newsC_time">{{ newsData.updateTime }}</span>-->
<!--      <div class="newsC_eyes"></div>-->
<!--      <span class="newsC_time">{{ newsData.checkTotal }}次</span>-->
<!--    </div>-->
<!--    <div class="newsC_line"></div>-->
<!--    <div class="newsC_content" v-html="newsData.content "></div>-->
    <div class="newsC_close" @click="closeNews"></div>
  </div>
</template>

<script>

// 新闻详情弹窗

export default {
  name: "newsDialog",
  props: {
  },
  data() {
    return {
      str:'测量工具集使用说明：\n' +
          '1.点击测长后鼠标对准要测量的起点按键盘1（Q上方的1），然后挪动鼠标到后续的终点按1即可获得测量结果\n' +
          '2.点击面积后鼠标对准要测量的起点按键盘2，然后一次挪到鼠标到每个顶点按2即可获得测量结果\n' +
          '3.点击地表测长后鼠标对准要测量的起点按键盘3，然后挪动鼠标到后续的终点按3即可获得测量结果\n' +
          '4.点击地表面积后鼠标对准要测量的起点按键盘4，然后挪动鼠标到后续的终点按4即可获得测量结果\n' +
          '\n' +
          '场景编辑和空间标绘使用说明：\n' +
          '开启控件标绘、系统模型管理或者按K键开启编辑模式，鼠标位置会生成预览模型，在菜单上选择想要放置的物体即可放置\n' +
          '关闭控件标绘、系统模型管理或者按L键离开编辑模式，鼠标恢复正常\n' +
          'P键存档，下次打开时之前放置的模型还会存在\n' +
          'WS和向上键向下键对应上下微调，在立面（墙壁等）使用时\n' +
          'Q、E键为绕着Z轴旋转15°\n' +
          'R键为绕着X轴旋转90°\n' +
          'T、Y为放大或缩小物体1.2倍'
    }
  },
  methods: {
    closeNews() {
      this.$emit('desDialogImp')
    }
  }
}
</script>

<style lang="scss">


.newsC {
  width: 662px;
  height: 550px!important;
  display: flex;
  position: relative;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;

  &_close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 50px;
    width: 22px;
    height: 21px;
    margin-top: 6px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  &_title {
    margin-left: 22px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &_time {
    height: 24px;
    text-align: center;
    font-size: 10px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
  }

  &_eyes {
    width: 17px;
    height: 13px;
    margin-left: 10px;
    margin-right: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_newseye.png");
  }

  &_line {
    margin-bottom: 10px;
    width: 90%;
    margin-left: 5%;
    height: 1px;
    background-color: #ffffff;
  }

  &_desTitle {
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 10%;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #FFFFFF;
    word-break:normal;
    width:auto;
    display:block;
    white-space:pre-wrap;
    word-wrap : break-word ;
    overflow: hidden ;
  }

  &_content {
    background-color: #FFFFFF;
    width: 90%;
    margin-left: 5%;
    height: 460px;
    overflow-y: auto;
  }
}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .newsC {
    height: calHeight_2k(600px);

    &_close {
      top: calHeight_2k(30px);
      height: calHeight_2k(22px);
      margin-top: calHeight_2k(6px)

    }

    &_title {
      height: calHeight_2k(24px);
      margin-top: calHeight_2k(30px);

      span {
        height: calHeight_2k(24px);
        line-height: calHeight_2k(24px);
      }
    }

    &_time {
      height: calHeight_2k(24px);
      line-height: calHeight_2k(24px);
    }

    &_eyes {
      height: calHeight_2k(13px);
    }

    &_line {
      margin-bottom: calHeight_2k(10px);
      height: calHeight_2k(1px);
    }

    &_desTitle {
      margin-top: calHeight_2k(10px);
    }

    &_content {
      height: calHeight_2k(460px);
    }
  }
}

</style>